<%@ page import="com.mahees.portfolio.ui.PageEnum"%>
<html>
<head>
<meta name="layout" content="default" />
<g:javascript library="default/application" />
</head>
<body>
	<div id="page">
		<div id="header">
			<ul class="menu inline_list">
				<g:each in="${PageEnum.values()}" status="i" var="pageEnum">
					<li><a class='navigation' data-route='${pageEnum.name()}'
						href='$rootUrl$key'> ${pageEnum.name}
					</a></li>
				</g:each>
			</ul>
		</div>

		<div id="content-container">
			<div id='home-content'>
				<div>content for the home or landing or dashboard page</div>
			</div>
			<div id='portfolio-content'>
				<h2>Recent Work</h2>
				Below are a few projects I've recently done work for. If you'd like
				to know more abouct my involvement with each, please contact me.

				portfolioList
				<?php
				foreach ($portfolioProjects as $category => $projects) {
					echo "<h3>$category</h3>";
					echo '<ul>';
					foreach ($projects as $proj) {
						$idTag = generateIdTag($proj['name']);
						echo "<li><a class='navigation' href='{$rootUrl}portfolio/$idTag' data-route='portfolio/{$idTag}'>{$proj['name']}</a></li>";
					}
					echo '</ul>';
				}
				?>
			</div>

			<div id='portfolio-detail-content' class='navigable'>
				<a href="#" id="previous-portfolio-detail-content"
					class="previous control">Previous</a>
				<?php
					foreach ($portfolioProjects as $category => $projects) {
						foreach ($projects as $proj) {
							$idTag = generateIdTag($proj['name']);
							echo "<div data-route='portfolio/{$idTag}' id='{$idTag}-detail'>
							<h2>{$proj['name']}</h2>
							<a href='{$rootUrl}portfolio/{$idTag}/image' class='main screenshot_thumb'>
							<img src='{$rootUrl}Screenshot.png' height='300px' width='400px' />
							</a> 
							<div class='project_description'>nuff details nuff detailsnuff detailsnuff detailsnuff detailsnuff details <br /> nuff detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br />detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br />detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br />detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br />detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br />detailsnuff detailsnuff detailsnuff detailsnuff detailsnuff details nuff detailsnuff details<br /></div>";
							echo "<ul class=\"inline_list screenshot_thumbs\">";
							for($i=1; $i<=15; $i++)
							{
								echo "<li><a class='screenshot_thumb'><img src='{$rootUrl}Screenshot.png' height='60px' width='60px' />
									</a></li>";
							}
							echo "</ul>";
							echo "</div>";
						}
					}
					?>
				<a href="#" id="next-portfolio-detail-content" class="next control">Next</a>
			</div>
			<div id='portfolio-large-photo' class="navigable">
				<div class="project_heading">
					<div>
						<h2>Project title</h2>
						<a href='back' class='button'>Back</a>
					</div>
					<div>The photo description. The photo description. The photo
						description. The photo description. The photo description. The
						photo description.</div>
				</div>
				<div class='photo_view'>
					<a href="#" id="previous-portfolio-photo" class="previous control">Previous</a>
					<img src='<?php echo $rootUrl; ?>Screenshot.png' height='700px'
						width='800px' /> <a href="#" id="next-portfolio-photo"
						class="next control">Next</a>
				</div>
			</div>

			<div id='projects-content'>
				<ul>
					<?php foreach ($personalProjects as $proj) { echo "<li><a href='#'>{$proj['name']}</a></li>"; } ?>
				</ul>
			</div>
			<div id='about-content'>Mahees Ishaq</div>
			<div id='tools-content'>
				<g:render template="templates/tools/toolTypeTemplate"
					collection="${tools}" var="toolList" />
			</div>
			<div id='resume-content'>
				<div>Email: maheesi@yahoo.com</div>
				<div>Resume: Adobe PDF Microsoft Word DOC Text Document TXT</div>
			</div>
		</div>
	</div>
	<div id="footer" class="inline_list">
		<ul>
			<g:each in="${PageEnum.values()}" status="i" var="pageEnum">
				<li><a class='navigation' data-route='${pageEnum.name()}'
					href='$rootUrl$key'> ${pageEnum.name}
				</a></li>
			</g:each>
		</ul>
	</div>
	
	<!-- 
	var portfolioProjects = <?php echo json_encode($portfolioProjects); ?>;
	var pageNames = <?php echo json_encode(array_keys($pageNames)); ?>; 
	$(function() {
	  var appRouter = new com.mahees.router.ApplicationRouter();
	  Backbone.history.start({pushState: true, root: '<?php echo $rootUrl; ?>'});
	}); 
	-->
	<g:javascript>
	
	</g:javascript>
	<script type="text/template" id="project_template">
	<a href="#" ><%= name %><img height="40" width="40" src="<%= displayImagePath %>" /></a>
	</script>

	<script type="text/template" id="project_detail_template">
	NUFF details <a href="#" ><%= name %><img height="40" width="40" src="<%= displayImagePath %>" /></a>
	</script>
</body>
</html>